<template>
	<view>
		<scroll-view class="container">
			<scroll-view class="content">
				<!-- <import src="../../lib/wxParse/wxParse.wxml" /> -->
				<!-- <template is="wxParse" data="{{wxParseData:topicDetail.nodes}}" /> -->
				<u-parse :content="topicDetail" @preview="preview" @navigate="navigate"></u-parse>
			</scroll-view>
			<scroll-view class="sv-goods" v-if="topicGoods.length > 0 ">
				<view class="topic-goods">
					<view class="b">
						<view class="item" v-for="(item,index ) in topicGoods" :key="index">
							<view @tap="gotoGoods(item.id)">
								<image class="img" :src="item.picUrl" background-size="cover"></image>
								<view class="right">
									<view class="text">
										<text class="name jhx_f7">{{item.name}}</text>
										<text class="desc jhx_f5">{{item.brief}}</text>
										<view class="price">
											<view class="retailPrice jhx_f8">￥{{item.retailPrice}}</view>
											<view class="counterPrice jhx_f9">￥{{item.counterPrice}}</view>
											<view class="brokerage" v-if="isAgent && item.brokeragePrice>0.01">赚￥{{item.brokeragePrice}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="comments">
				<view class="h">
					<text class="t">精选留言</text>
					<image bindtap="postComment" class="i" src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/comment-add-2aca147c3f.png"></image>
				</view>
				<view class="has-comments" v-if="commentList.length > 0 ">
					<view class="b">
						<view class="item" v-for=" (item,index ) in commentList" :key="index">
							<view class="info">
								<view class="user">
									<image class="avatar" :src="item.userInfo.avatarUrl"></image>
									<text class="nickname">{{item.userInfo.nickName}}</text>
								</view>
								<view class="time">{{item.addTime}}</view>
							</view>
							<view class="comment">
								{{item.content}}
							</view>
						</view>
					</view>
					<view class="load" v-if="commentCount > 5">
						<view @tap="gotoTopicComment(topic.id)">查看更多</view>
					</view>
				</view>
				<view class="no-comments" v-if="commentList.length <= 0">
					<view class="b">
						<image class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-comment-560f87660a.png"></image>
						<text class="txt">等你来留言</text>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="rec-box">
				<view class="h">
					<text class="txt">活动推荐</text>
				</view>
				<view class="b">
					<view class="item" v-for=" (item,index ) in  topicList" :key="index" @tap="gotoTopicDetail(item.id)">
						<image class="img" :src="item.picUrl"></image>
						<text class="title">{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uParse from "@/components/feng-parse/parse.vue"
	export default {
		components: {
			uParse,
		},
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {
				topicDetail: '',
				id: 0,
				topic: {},
				topicList: [],
				commentCount: 0,
				commentList: [],
				isAgent: false,
				topicGoods: []
			}
		},
		onShareAppMessage: function() {
			let that = this;
			let userInfo = wx.getStorageSync('userInfo');
			let shareUserId = 1;
			if (userInfo) {
				shareUserId = userInfo.userId;
			}
			console.log('/pages/index/index?scene=topic,' + that.data.topic.id + '&shareUserId=' + shareUserId);
			return {
				title: that.data.topic.subtitle,
				//desc: that.data.brand.desc,
				path: '/pages/index/index?scene=topic,' + that.data.topic.id + '&shareUserId=' + shareUserId
			}
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			var that = this;
			that.id = options.id;

			that.$util.request(that.$api.api.TopicDetail, {
				id: that.id
			}).then(function(res) {
				if (res.errno === 0) {
					that.topic = res.data.topic;
					that.topicGoods = res.data.goods;
					that.topicDetail = res.data.topic.content;
					// WxParse.wxParse('topicDetail', 'html', res.data.topic.content, that);
				}
			});

			that.$util.request(that.$api.api.TopicRelated, {
				id: that.id
			}).then(function(res) {
				if (res.errno === 0) {
					that.topicList = res.data;
				}
			});
		},
		onShow: function() {
			// 页面显示
			this.getCommentList();
			let that = this;
			let userInfo = that.user;
			if (userInfo && userInfo.userLevel == 2) {
				that.isAgent = true;
			}
		},
		methods: {
			gotoGoods(goodsId) {
				uni.navigateTo({
					url: '../goods/goods?id=' + goodsId
				})
			},
			gotoTopicComment(commentId) {
				uni.navigateTo({
					url: '../topicComment/topicComment?valueId=' + commentId + '&type=1'
				})
			},
			gotoTopicDetail(detailId) {
				uni.navigateTo({
					url: '../topicDetail/topicDetail?id=' + detailId
				})
			},
			getCommentList() {
				let that = this;
				that.$util.request(that.$api.api.CommentList, {
					valueId: that.id,
					type: 1,
					showType: 0,
					page: 1,
					size: 5
				}).then(function(res) {
					if (res.errno === 0) {
						that.commentList = res.data.data;
						that.commentCount = res.data.count;
					}
				});
			},
			postComment() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../auth/login/login"
					});
				} else {
					uni.navigateTo({
						url: '../topicCommentPost/topicCommentPost?valueId=' + this.id + '&type=1',
					})
				}
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: auto;
		font-size: 0;
	}

	.content image {
		display: inline-block;
		width: 100%;
	}

	.comments {
		width: 100%;
		height: auto;
		padding-left: 30rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	.comments .h {
		height: 93rpx;
		line-height: 93rpx;
		width: 720rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #d9d9d9;
	}

	.comments .h .t {
		display: block;
		float: left;
		width: 50%;
		font-size: 29rpx;
		color: #333;
	}

	.comments .h .i {
		display: block;
		float: right;
		margin-top: 30rpx;
		width: 33rpx;
		height: 33rpx;
	}

	.comments .b {
		height: auto;
		width: 720rpx;
	}

	.comments .item {
		height: auto;
		width: 720rpx;
		overflow: hidden;
		border-bottom: 1px solid #d9d9d9;
	}

	.comments .info {
		height: 127rpx;
		width: 100%;
		padding: 33rpx 0 27rpx 0;
	}

	.comments .user {
		float: left;
		width: auto;
		height: 67rpx;
		line-height: 67rpx;
		font-size: 0;
	}

	.comments .user .avatar {
		display: block;
		float: left;
		width: 67rpx;
		height: 67rpx;
		margin-right: 17rpx;
		border-radius: 50%;
	}

	.comments .user .nickname {
		display: block;
		width: auto;
		float: left;
		height: 66rpx;
		overflow: hidden;
		font-size: 29rpx;
		line-height: 66rpx;
	}

	.comments .time {
		display: block;
		float: right;
		width: auto;
		height: 67rpx;
		line-height: 67rpx;
		color: #7f7f7f;
		font-size: 25rpx;
		margin-right: 30rpx;
	}

	.comments .comment {
		width: 720rpx;
		padding-right: 30rpx;
		line-height: 45.8rpx;
		margin-bottom: 30rpx;
		font-size: 29rpx;
		color: #333;
	}

	.comments .load {
		width: 720rpx;
		height: 108rpx;
		line-height: 108rpx;
		text-align: center;
		font-size: 38.5rpx;
	}

	.no-comments {
		height: 297rpx;
	}

	.no-comments .txt {
		height: 43rpx;
		line-height: 43rpx;
		display: block;
		width: 100%;
		text-align: center;
		font-size: 29rpx;
		color: #7f7f7f;
	}

	.no-comments .icon {
		margin: 48rpx auto 18rpx auto;
		height: 130rpx;
		display: block;
		width: 115rpx;
	}

	.sv-goods {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		background: #fff
	}

	.sv-goods .b .item {
		border-bottom: 1px solid #f4f4f4;
		margin: 0 10rpx;
		margin-bottom: -2rpx;
		height: 270rpx;
		width: 690rpx;
	}

	.sv-goods .b .img {
		margin-top: 10rpx;
		margin-right: 15rpx;
		float: left;
		width: 230rpx;
		height: 230rpx;
	}

	.sv-goods .b .right {
		float: left;
		height: 264rpx;
		width: 436rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.sv-goods .b .text {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		height: 264rpx;
		width: 436rpx;
	}

	.sv-goods .b .name {
		width: 436rpx;
		display: block;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.sv-goods .b .desc {
		margin-top: 18rpx;
		width: 436rpx;
		display: block;
		line-height: 38rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.sv-goods .b .price {
		margin-top: 18rpx;
		width: 436rpx;
		display: block;
		line-height: 30rpx;
	}

	.sv-goods .text .price {
		line-height: 50rpx;
		align-content: center;
		display: flex;
	}

	.sv-goods .text .counterPrice {
		padding-left: 5%;
		text-decoration: line-through;
		width: 40%;
	}

	.sv-goods .text .retailPrice {
		float: left;
		padding-left: 0rpx;
		width: 30%;
	}

	.sv-goods .text .brokerage {
		float: left;
		padding-right: 20rpx;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 30%;
	}

	.rec-box {
		width: 690rpx;
		height: auto;
		margin: 0 30rpx;
	}

	.rec-box .h {
		position: relative;
		width: 690rpx;
		height: 96rpx;
		/*border-bottom: 1px solid #d0d0d0;*/
		margin-bottom: 32rpx;
	}

	.rec-box .h .txt {
		display: inline-block;
		position: absolute;
		background: #f4f4f4;
		top: 59rpx;
		left: 200rpx;
		width: 290rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 30rpx;
		color: #999;
		text-align: center;
	}

	.rec-box .b .item {
		width: 690rpx;
		height: 397rpx;
		padding: 24rpx 24rpx 30rpx 24rpx;
		background: #fff;
		margin-bottom: 30rpx;
	}

	.rec-box .b .item .img {
		height: 278rpx;
		width: 642rpx;
	}

	.rec-box .b .item .title {
		display: block;
		margin-top: 30rpx;
		height: 30rpx;
		width: 642rpx;
		font-size: 28rpx;
	}

	@import "../../lib/wxParse/wxParse.wxss";
</style>
